<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PCdrug</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background: red;
            margin: 100px  0 0 0;
            position: relative;
            top: 0;
            left: 0;
        }
        #box1{
            width: 50px;
            height: 50px;
            background: blue;
            position: relative;
            left:10px;
            top:0;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="box1"></div>
</div>
</body>
<script>
    /**
     * obj.offsetLeft --获取到obj到他定位父级的left（数值）
     * obj.offsetTop --获取到obj到他定位父级的top（数值）
     *声明：上面两个是个只读属性！！！！
     * obj.clientWidth --获取到obj的 width+padding
     * obj.offsetWidth --获取到obj的 width+padding+border
     * obj.scrollHeight --获取到obj的实际高度 width+padding+border+scrollTop
     * （内容溢出，获取到连带着滚动条的高度）
     * 获取到浏览器的宽度
     * window.innerWidth
     * document.clientWidth
     * 获取滚动高度
     *
        document.onclick = function(){
                 alert( document.body.scrollTop || document.documentElement.scrollTop ); //获取滚动高度
        };
       获取页面宽高
     document.documentElement.clientWidth
     document.documentElement.clientHeight
     * */
    var oBox=document.querySelector("#box");
    var oBox1=document.querySelector("#box1");
//    oBox.onmousedown=function (e) {
//        var e=e||window.event;
//        var x=e.clientX-this.offsetLeft;//计算出在内部的距离
//        var y=e.clientY-this.offsetTop;//计算出在内部的距离
//        document.onmousemove=function (e) {
//            var e=e||window.event;
//            oBox.style.left=e.clientX-x+"px"
//            oBox.style.top=e.clientY-y-100+"px"//计算的时候去掉margin-top:因为他是父级的地方，
//            console.log(e.clientY)
//            console.log(x)
//            console.log("top:"+(e.clientY-y)+"px")
//        }
//        document.onmouseup=function () {
//            document.onmousemove=null;
//                document.onmouseup=null;
//        }
//    }
    drag(oBox)
    drag(oBox1)
    function drag(obj){
        obj.onmousedown = function(e){
            var e = e || window.event;

            var disx = e.clientX - this.offsetLeft;
            var disy = e.clientY - this.offsetTop;

            if ( box.setCapture ){
                box.setCapture();
            }
            document.onmousemove = function(e){
                var e = e || window.event;
                obj.style.left = e.clientX - disx + 'px';
                obj.style.top = e.clientY - disy -100 + 'px';
            };
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;

                if( box.releaseCapture ){
                    box.releaseCapture();
                }
            };
            return false;
        };
    };
</script>
</html>